
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程直播</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/live.css">
    <script src="./js/jquery-1.8.2.min.js"></script>
</head>

<body>
    <div id="live">
        直播内容
    </div>

    <div class="footer-box">
        <div class="content">
            <div class="left">
                <ul>
                    <li>
                        <div class="name">demo：</div>
                        <div class="comment">擅长Java相关服务端技术，深刻理解编程思想和设计模式</div>
                    </li>

                    <li>
                        <div class="name">demo：</div>
                        <div class="comment">ashshahsahshashahshahsahsahsahshashahshashahshahsahshashahsah</div>
                    </li>

                    <li>
                        <div class="name">demo：</div>
                        <div class="comment">111111</div>
                    </li>

                    <li>
                        <div class="name">demo：</div>
                        <div class="comment">111111</div>
                    </li>

                    <li>
                        <div class="name">demo：</div>
                        <div class="comment">111111</div>
                    </li>

                    <li>
                        <div class="name">demo：</div>
                        <div class="comment">擅长Java相关服务端技术，深刻理解编程思想和设计模式</div>
                    </li>
                </ul>
            </div>
            <div class="right">
                <div class="product">
                    <a href="#">
                        <div class="thumb">
                            <img src="images/banner.jpg" alt="">
                        </div>
                        <div class="info">
                            <span class="title">PHP后端</span>
                            <span class="price">￥599</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="comment">
            <input type="text" name="comment" placeholder="请输入评论" maxlength="50">
            <div class="cart-btn">
                <img src="images/f031.png" alt="">
            </div>
        </div>
    </div>

    <div class="product-box">
        <div class="title">主播购物车</div>
        <div class="close">X</div>
        <div class="list">
            <div class="item">
                <div class="thumb">
                    <a href="#">
                        <img src="images/banner.jpg" alt="">
                    </a>
                </div>
                <div class="info">
                    <a href="#">
                        <div class="title">PHP后端</div>
                        <div class="content">
                            擅长Java相关服务端技术，深刻理解编程思想和设计模式，精通各种常用的开发框架、数据库等技术。
                            多年的项目经验，曾曾担任过高级软件工程师、软件系统架构师、项目经理等职位。
                        </div>
                    </a>
                    <div class="footer">
                        <div class="price">￥599</div>
                        <a class="buy">购买</a>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="thumb">
                    <a href="#">
                        <img src="images/banner.jpg" alt="">
                    </a>
                </div>
                <div class="info">
                    <a href="#">
                        <div class="title">PHP后端</div>
                        <div class="content">
                            擅长Java相关服务端技术，深刻理解编程思想和设计模式，精通各种常用的开发框架、数据库等技术。
                            多年的项目经验，曾曾担任过高级软件工程师、软件系统架构师、项目经理等职位。
                        </div>
                    </a>
                    <div class="footer">
                        <div class="price">￥599</div>
                        <a class="buy">购买</a>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="thumb">
                    <a href="#">
                        <img src="images/banner.jpg" alt="">
                    </a>
                </div>
                <div class="info">
                    <a href="#">
                        <div class="title">PHP后端</div>
                        <div class="content">
                            擅长Java相关服务端技术，深刻理解编程思想和设计模式，精通各种常用的开发框架、数据库等技术。
                            多年的项目经验，曾曾担任过高级软件工程师、软件系统架构师、项目经理等职位。
                        </div>
                    </a>
                    <div class="footer">
                        <div class="price">￥599</div>
                        <a class="buy">购买</a>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="thumb">
                    <a href="#">
                        <img src="images/banner.jpg" alt="">
                    </a>
                </div>
                <div class="info">
                    <a href="#">
                        <div class="title">PHP后端</div>
                        <div class="content">
                            擅长Java相关服务端技术，深刻理解编程思想和设计模式，精通各种常用的开发框架、数据库等技术。
                            多年的项目经验，曾曾担任过高级软件工程师、软件系统架构师、项目经理等职位。
                        </div>
                    </a>
                    <div class="footer">
                        <div class="price">￥599</div>
                        <a class="buy">购买</a>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="thumb">
                    <a href="#">
                        <img src="images/banner.jpg" alt="">
                    </a>
                </div>
                <div class="info">
                    <a href="#">
                        <div class="title">PHP后端</div>
                        <div class="content">
                            擅长Java相关服务端技术，深刻理解编程思想和设计模式，精通各种常用的开发框架、数据库等技术。
                            多年的项目经验，曾曾担任过高级软件工程师、软件系统架构师、项目经理等职位。
                        </div>
                    </a>
                    <div class="footer">
                        <div class="price">￥99</div>
                        <a class="buy">购买</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

<script>
    $('.cart-btn').click(function () {
        $('.product-box').addClass('open');
    });

    $('.close').click(function () {
        $('.product-box').removeClass('open');
    })
</script>